<template>
	<view class="MakeAvatar" :style="{ height: webStyle.height }">
		<image class="bgi" :src="imgPath + 'login/Background.png'" mode=""></image>
		<view class="title-box" :style="{ 'padding-top': inf0Pt + 'vh' }">
			<view class="left" :style="{ 'margin-top': -0 + 'vh' }">
				<image class="back" @click="back" :src="imgPath + 'AICont/back-arrow.svg'" mode="widthFix"></image>
			</view>
			<view class="title" :style="{ 'margin-top': -0 + 'vh' }">定制数字人</view>
			<view class="right">信息安全须知</view>
		</view>
		<view class="main-tabbar">
			<view class="tabbar-item" v-for="(item, index) in mainTabList" :key="index" @tap="mainTabInd = index">
				<view class="img">
					<image :class="['icon', mainTabInd == index ? 'ac' : '']" :src="imgPath + 'MakeAvatar/' + item[mainTabInd == index ? 'imgAc' : 'img']" mode="widthFix"></image>
				</view>
				<view :class="['text', mainTabInd == index ? 'ac' : '']">{{ item.text }}</view>
			</view>
		</view>
		<view class="page1" v-if="mainTabInd == 0">
			<view class="content" @tap="openPopup('page1popup')">
				<template v-if="successRes1 && successRes1.tempVideoPath">
					<video :style="{ visibility: !page1popupShow && !uploadTipsShow ? 'visibility' : 'hidden', height: !page1popupShow && !uploadTipsShow ? '' : '0' }" @tap.stop="" class="video" object-fit="contain" :src="successRes1.tempVideoPath" controls></video>
				</template>
				<template v-else>
					<image class="icon" :src="imgPath + 'MakeAvatar/' + 'mainTab1.svg'" mode="widthFix"></image>
					<view class="text">点击拍摄训练视频</view>
				</template>
			</view>
			<view class="main-btns">
				<view class="btn style1" @tap="openPopup('page1popup')" v-if="successRes1 && successRes1.tempVideoPath">
					{{ "重置视频" }}
				</view>
				<view class="btn next-btn" @tap="nextStep">
					{{ "下一步" }}
				</view>
			</view>
		</view>
		<view class="page2" v-if="mainTabInd == 2">
			<view class="content" @tap="openPopup('page2popup')">
				<template v-if="successRes1 && successRes2.tempVideoPath">
					<video v-if="!page2popupShow" @tap.stop="" class="video" object-fit="contain" :src="successRes2.tempVideoPath" controls></video>
				</template>
				<template v-else>
					<image class="icon" :src="imgPath + 'MakeAvatar/' + 'mainTab1.svg'" mode="widthFix"></image>
					<view class="text">点击录制训练音频</view>
				</template>
			</view>
			<view class="main-btns">
				<view class="btn style1" @tap="openPopup('page2popup')" v-if="successRes2 && successRes2.tempVideoPath">
					{{ "重置音频" }}
				</view>
				<view class="btn next-btn" @tap="nextStep">
					{{ "下一步" }}
				</view>
			</view>
		</view>
		<view class="page3" v-if="mainTabInd == 1">
			<view class="main-form">
				<view class="form-item">
					<view class="label">
						<view class="text">数字人名称</view>
						<view class="subText">*</view>
					</view>
					<view class="box input-box">
						<input class="text" type="text" placeholder-class="nac" @input="(evnet) => replaceAvatarName(evnet)" :value="avatarName" :placeholder="'请输入数字人名称'" />
					</view>
				</view>
				<view class="form-item flex-box" style="flex: 1">
					<view class="label">
						<view class="text">身份授权</view>
						<view class="subText">*</view>
					</view>
					<view class="box upload-box" @tap="openPopup('page3popup')">
						<template v-if="successRes2 && successRes2.tempVideoPath">
							<video v-if="!page2popupShow" @tap.stop="" class="video" object-fit="contain" :src="successRes2.tempVideoPath" controls></video>
						</template>
						<template v-else>
							<image class="icon" :src="imgPath + 'MakeAvatar/' + 'mainTab1.svg'" mode="widthFix"></image>
							<view class="text">点击拍摄授权视频</view>
						</template>
					</view>
				</view>
			</view>
			<view class="main-btns">
				<!-- <view class="btn style1" @tap="prevStep">上一步</view> -->
				<view class="btn style1" @tap="openPopup('page2popup')" v-if="successRes2 && successRes2.tempVideoPath">
					{{ "重置视频" }}
				</view>
				<view class="btn style2" @tap="submit">提交训练</view>
			</view>
		</view>
		<uni-popup ref="page1popup" type="bottom" background-color="#222224" @change="changjingPage1popupShow" border-radius="3vw 3vw 0 0">
			<view class="popup-view">
				<view class="popup-title">数字人拍摄教程</view>
				<view class="popup-cont">
					<view class="title">
						<view class="titleText">拍摄提示</view>
						<view class="subTitle">请在安静的环境下，保持镜头平视，吐字清晰的朗读文案</view>
					</view>
					<view class="photo-box">
						<image class="pic" src="https://ai.yainoo.com/video/appjpg/侧坐1.jpg"></image>
						<image class="pic" src="https://ai.yainoo.com/video/appjpg/挡嘴1.jpg" @taps="toPage('/pages/createVideo/createVideo')"></image>
						<image class="pic" src="https://ai.yainoo.com/video/appjpg/舔嘴1.jpg"></image>
						<!-- <image class="pic" src="https://ai.yainoo.com/video/appjpg/形象授权.jpg"></image> -->
						<image class="pic" src="https://ai.yainoo.com/video/appjpg/正确1.jpg"></image>
					</view>
					<view class="title">
						<view class="text">视频教程</view>
						<view class="subTitle"></view>
					</view>
					<view class="video-box">
						<video v-if="page1popupShow" :show-center-play-btn="page1popupShow" id="page1popupVideo" class="video" :show-mute-btn="page1popupShow" src="https://ai.yainoo.com/video/小程序教程2.mp4" :controls="page1popupShow"></video>
					</view>
				</view>

				<view class="popup-btns">
					<view class="btn people-subBtn" @tap="showCamera('page1popup')">在线拍摄</view>
					<!-- <uni-file-picker ref="filePicker1" :value="filePickerVal" file-mediatype="video" mode="grid" :list-styles="imageStyles" @select="select">
						<view class="btn next-btn">本地视频</view>
					</uni-file-picker> -->
					<view class="btn next-btn style2" @tap="openUploadTips">相册视频</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="page2popup" type="bottom" background-color="#222224" @change="changjingPage2popupShow" border-radius="3vw 3vw 0 0">
			<view class="popup-view">
				<view class="popup-title">授权视频拍摄教程</view>
				<view class="popup-cont">
					<view class="photo-box">
						<view class="pos-box">
							<image class="pic style2" src="https://ai.yainoo.com/video/appjpg/形象授权压缩.jpg" mode="widthFix"></image>
							<view class="pos-text">本人一字不差的朗读提示器文案</view>
						</view>
					</view>
				</view>
				<view class="people-subBtn" @tap="showCamera('page3popup')">在线拍摄</view>
			</view>
		</uni-popup>
		<uni-popup ref="page3popup" type="bottom" background-color="#222224" border-radius="3vw 3vw 0 0">
			<view class="popup-view">
				<view class="popup-title">授权视频拍摄教程</view>
				<view class="popup-cont">
					<view class="photo-box">
						<view class="pos-box">
							<image class="pic style2" src="https://ai.yainoo.com/video/appjpg/形象授权压缩.jpg" mode="widthFix"></image>
							<view class="pos-text">您还需要录制一段30秒的录音及形象授权，注意您需要生动且富有情感的念出提示词里面的文案</view>
						</view>
					</view>
				</view>
				<view class="people-subBtn" @tap="showCamera('page3popup')">在线拍摄</view>
			</view>
		</uni-popup>
		<uni-popup ref="uploadTips" type="dialog" @change="changeUploadTipsShow">
			<uni-popup-dialog mode="base" title="温馨提示" confirmText="我已知晓" :showClose="true" @confirm="selectVideo('page1popup')">
				<view class="uploadTips">
					<view class="">本地视频要求:</view>
					<view class="">文件格式: MP4/MOV;</view>
					<view class="">视频长度: 25秒~30秒;</view>
					<view class="">文件大小: 小于100MB;</view>
					<view class="">分辨率: 360P~720P;</view>
					<view class="">视频尺寸: 9：16;</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
import { tools } from "../../utils/util";
import * as api from "@/api/home.js";
export default {
	name: "MakeAvatar",
	data() {
		return {
			imgPath: tools.imgPath,
			inf0Pt: 0,
			systemInfo: {},
			webStyle: {
				height: ""
			},
			filePickerVal: [],

			imageStyles: {
				width: "0px",
				height: "0px",
				// 是否显示边框
				border: false,
				// 是否显示分隔线
				dividline: false,
				// 线条样式
				borderStyle: {
					width: 1,
					color: "blue",
					radius: 2
				}
			},
			page1popupShow: false,
			page2popupShow: false,
			uploadTipsShow: false,
			avatarName: "",
			mainTabInd: 0,
			mainTabList: [
				{
					img: "mainTab1.svg",
					imgAc: "mainTab1-ac.svg",
					text: "声音采集"
				},
				{
					img: "mainTab1.svg",
					imgAc: "mainTab1-ac.svg",
					text: "训练视频"
				},
				{
					img: "mainTab2.svg",
					imgAc: "mainTab2-ac.svg",
					text: "身份认证"
				}
			],

			successRes1: null,
			successRes2: null,
			successRes3: null,
			submiting: false
		};
	},
	methods: {
		// 获取上传状态
		select(e) {
			console.log("选择文件：", e);
			this.successRes1 = {
				tempVideoPath: e.tempFilePaths[0]
			};
			this.$refs.filePicker1.clearFiles();
		},
		// 获取上传进度
		progress(e) {
			console.log("上传进度：", e);
		},

		// 上传成功
		success(e) {
			console.log("上传成功");
		},

		// 上传失败
		fail(e) {
			console.log("上传失败：", e);
		},
		// res数据初始化
		initRes() {
			let successRes = null;
			let type = null;
			["tempRecordVideoRes1", "tempRecordVideoRes2", "tempRecordVideoRes3"].map((e, i) => {
				let res = uni.getStorageSync(e);
				if (!res) return;
				type = i + 1;
				successRes = res;
				this["successRes" + type] = successRes || {};
				// uni.removeStorageSync(e);
			});
		},

		// 获取系统info
		initSystemInfo(isUpdate = true) {
			console.log(this.basePath);
			const that = this;
			return new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success(payload) {
						if (isUpdate) {
							that.systemInfo = payload;
							that.webStyle.height = `${that.systemInfo.windowHeight}px`;
							console.log("initSystemInfo", that.systemInfo);
							switch (that.systemInfo.uniPlatform) {
								case "web":
									that.inf0Pt = 4.5;
									break;
								case "app":
									that.inf0Pt = 4.5;
									break;
								case "mp-weixin":
									that.inf0Pt = 9.6;
									break;
							}
						}
						resolve(payload);
					}
				});
			});
		},

		// 修改数字人名称
		replaceAvatarName(event) {
			this.avatarName = event.target.value;
		},
		// 选择本地视频
		selectVideo(refName) {
			const that = this;
			this.$refs.uploadTips.close();
			uni.chooseVideo({
				sourceType: ["album", "camera"],
				maxDuration: 30,
				compressed: false,
				camera: "front",
				success(res) {
					console.log("选择本地视频", res);
					// res => {
					// 	"duration": 4,
					// 	"size": 203949,
					// 	"tempFilePath": "wxfile://tmp_7901d4c0d5f618d44023e110ee28986df8edd682a9a4659e.mp4",
					// 	"width": 540,
					// 	"errMsg": "chooseVideo:ok",
					// 	"height": 960
					// }
					console.log((res.width / res.height).toFixed(4) != 9 / 16, (res.width / res.height).toFixed(4), 9 / 16);
					// if (res.duration > 30) {
					// 	return tools.easyToast("视频时长超过30秒,请重新选择文件!");
					// }
					// if (res.duration < 25) {
					// 	return tools.easyToast("视频时太短,请重新选择文件!");
					// }
					// if (res.width > 720 || res.height > 1280) {
					// 	return tools.easyToast("视频分辨率不能大于720P!");
					// }
					// if ((res.width / res.height).toFixed(4) != 9 / 16) {
					// 	return tools.easyToast("视频比例必须为9:16!");
					// }
					that.successRes1 = {
						tempVideoPath: res.tempFilePath
					};

					that.$refs[refName]?.close();
					let videoCtx = uni.createVideoContext(refName + "Video");
					videoCtx.pause();
				},
				fail(err) {
					console.log(err);
					tools.easyToast("选择文件失败，请重新选择!");
				}
			});
		},
		// 下一步
		nextStep() {
			if (this.mainTabInd == 0 && !this.successRes1?.tempVideoPath) {
				this.openPopup("page1popup");
			} else if (this.mainTabInd == 1 && !this.successRes2?.tempVideoPath) {
				this.openPopup("page2popup");
			} else {
				this.mainTabInd = this.mainTabInd + 1;
			}
		},

		// 上一步
		prevStep() {
			this.mainTabInd = this.mainTabInd - 1;
		},

		// oss上传文件
		getOSSApi_new(ossData, file, name) {
			console.log("oss", ossData, file, name);
			const that = this;
			let res = ossData;
			function getUUID() {
				let keyStr = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
				keyStr = "xxxxxxxx-6xxx";
				return keyStr.replace(/[xy]/g, (c) => {
					return (c === "x" ? (Math.random() * 16) | 0 : "r&0x3" | "0x8").toString(16);
				});
			}
			let url_name = "https://alleymall.oss-cn-guangzhou.aliyuncs.com";
			let key = res.data.dir + "/" + getUUID() + name;
			let opt = {
				url: url_name,
				filePath: file,
				name: "file",
				timeout: 1000 * 60 * 10,
				formData: {
					policy: res.data.policy,
					signature: res.data.signature,
					ossaccessKeyId: res.data.accessid,
					key: key,
					dir: res.data.dir,
					host: res.data.host,
					expire: res.data.expire,
					callback: res.data.callback
				}
			};
			console.log(opt);
			return new Promise((next) => {
				let task = uni.uploadFile({
					...opt,
					success: (uploadFileRes) => {
						let src = url_name + "/" + key;
						// console.log(src);
						// that.audioPlayerSrc = src;
						// console.log(response);
						next({ ...uploadFileRes, src });
					},
					fail(err) {
						console.err(err);
						next(false);
						this.submiting = false;
					}
				});
				task.onProgressUpdate((uploadFileRes) => {
					console.log("task.onProgressUpdate", res);
					if (res.progress == 100) {
						let src = url_name + "/" + key;
						next({ ...uploadFileRes, src });
					}
				});
			});
		},
		//上传文件api
		async getOSSApi(ossData, file, name) {
			const that = this;
			let res = ossData;

			function getUUID() {
				let keyStr = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
				keyStr = "xxxxxxxx-6xxx";
				return keyStr.replace(/[xy]/g, (c) => {
					return (c === "x" ? (Math.random() * 16) | 0 : "r&0x3" | "0x8").toString(16);
				});
			}
			const formData = new FormData();
			let url_name = "https://alleymall.oss-cn-guangzhou.aliyuncs.com";
			let key = res.data.dir + "/" + getUUID() + name;
			formData.append("policy", res.data.policy);
			formData.append("signature", res.data.signature);
			formData.append("ossaccessKeyId", res.data.accessid);
			formData.append("key", key);
			formData.append("dir", res.data.dir);
			formData.append("host", res.data.host);
			formData.append("expire", res.data.expire);
			formData.append("callback", res.data.callback);
			// formData.append('type', res.data.callback)
			formData.append("file", file);

			return axios
				.post(url_name, formData, {
					headers: {
						"Content-Type": "multipart/form-data"
					}
				})
				.then((response) => {
					let src = url_name + "/" + key;
					// console.log(src);
					// that.audioPlayerSrc = src;
					// console.log(response);
					return {
						...response,
						src
					};
				})
				.catch((error) => {
					console.log(error);
				});
		},

		// 提交
		async submit() {
			if (!this.successRes1?.tempVideoPath) {
				return tools.easyToast("请补充训练视频!");
			}
			if (!this.successRes2?.tempVideoPath) {
				return tools.easyToast("请补充授权视频!");
			}
			// if (!this.successRes3?.tempVideoPath) {
			// 	return tools.easyToast("请补充授权视频!");
			// }
			if (!this.avatarName) {
				return tools.easyToast("请输入数字人名称!");
			}
			if (this.submiting) return;
			this.submiting = true;
			let video = await new Promise(async (next) => {
				let name = this.avatarName + "训练视频" + tools.createID();
				let ossData = await api.postOSS({
					reqType: "",
					matName: name,
					payLoad: {}
				});
				uni.showLoading({
					title: "提交中..."
				});
				if (this.successRes1.tempVideoPath.includes("https://alleymall.oss-cn-guangzhou.aliyuncs.com")) {
					let res = {
						src: this.successRes1.tempVideoPath
					};
					next(res.src);
				} else {
					let res = await this.getOSSApi_new(ossData, this.successRes1.tempVideoPath, name);
					next(res.src);
				}
			});
			console.log({ video });
			let rootvideo = await new Promise(async (next) => {
				let name = this.avatarName + "授权视频" + tools.createID();
				let ossData = await api.postOSS({
					reqType: "",
					matName: name,
					payLoad: {}
				});
				uni.showLoading({
					title: "提交中..."
				});
				let res = await this.getOSSApi_new(ossData, this.successRes2.tempVideoPath, name);
				next(res.src);
			});
			console.log({ rootvideo });
			// let rootvideo = await new Promise(async (next) => {
			// 	let name = this.avatarName + "授权视频" + tools.createID();
			// 	let ossData = await api.postOSS({
			// 		reqType: "",
			// 		matName: name,
			// 		payLoad: {}
			// 	});
			// 	uni.showLoading({
			// 		title: "提交中..."
			// 	});
			// 	let res = await this.getOSSApi_new(ossData, this.successRes3.tempVideoPath, name);
			// 	next(res.src);
			// });
			let image = await new Promise(async (next) => {
				let name = this.avatarName + "封面" + tools.createID();
				let ossData = await api.postOSS({
					reqType: "",
					matName: name,
					payLoad: {}
				});
				uni.showLoading({
					title: "提交中..."
				});
				let inputVal = this.successRes1.tempThumbPath;
				if (inputVal) {
					let res = await this.getOSSApi_new(ossData, inputVal, name);
					next(res.src);
				} else {
					let res = await api.processingVideo({ url: video, num: 1 });
					console.log("获取视频第一帧", res);
					if (!res) return tools.easyToast("提交失败！tips:" + "feng-fail");
					next(res.data.replace(/\n/g, ""));
				}
			});
			uni.hideLoading();
			let sand = {
				video: video,
				image: image /* || "https://alleymall.oss-cn-guangzhou.aliyuncs.com/2024-04-26/8f525f82-6880fengmian.png" */,
				rootvideo: rootvideo,
				modename: this.avatarName
			};
			console.log("MakeAvatarSubmit", sand);
			let res = await api.materialUpload(sand);
			if (!res) return (this.submiting = false);
			console.log("materialUpload", res);
			tools.easyToast("提交成功!");
			uni.setStorageSync("toHome", {
				footerBarListAc: 2
			});
			uni.reLaunch({
				url: "/pages/index/index"
			});
		},

		// 打开弹出层
		async openPopup(refName) {
			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			this.$refs[refName]?.open("bottom");
			console.log("打开弹出层", refName + "Video");
			await new Promise((wait) => setTimeout(wait), 500);
			let videoCtx = uni.createVideoContext(refName + "Video", this);
			await new Promise((wait) => setTimeout(wait), 500);
			console.log("视频播放");
			videoCtx.play();
		},

		// pagePopup显隐
		changjingPage1popupShow(val) {
			this.page1popupShow = val.show;
		},
		// pagePopup显隐
		changjingPage2popupShow(val) {
			this.page2popupShow = val.show;
		},
		// UploadTipsp显隐
		changeUploadTipsShow(val) {
			this.uploadTipsShow = val.show;
		},
		// 显示上传要求
		openUploadTips() {
			this.$refs.page1popup.close();
			this.$refs.uploadTips.open();
		},
		// 显示相机
		showCamera(refName) {
			this.$refs[refName]?.close();
			let videoCtx = uni.createVideoContext(refName + "Video");
			videoCtx.pause();
			this.removeStorage();
			uni.setStorageSync("CameraBoxType", this.mainTabInd + 1);
			// #ifdef H5
			this.toPage("/cameraBox/cameraBox/cameraBoxWeb");
			// #endif
			// #ifndef H5
			this.toPage("/cameraBox/cameraBox/cameraBox");
			 // #endif
		},
		// 清除缓存
		removeStorage() {
			uni.removeStorageSync("CameraBoxType");
			uni.removeStorageSync("tempRecordVideoRes1");
			uni.removeStorageSync("tempRecordVideoRes2");
			uni.removeStorageSync("tempRecordVideoRes3");
		},
		// 跳转页面
		toPage(path, type = "navigateTo") {
			uni[type]({
				url: path
			});
		},

		// 回退
		back() {
			let pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.setStorageSync("toHome", {
					footerBarListAc: 2
				});
				uni.reLaunch({
					url: "/pages/index/index"
				});
			}
		}
	},

	onResize(res) {
		res.size.windowWidth; // 新的显示区域宽度
		res.size.windowHeight; // 新的显示区域高度
		console.log("新的显示区域", res.size.windowWidth, res.size.windowHeight);
	},
	onLoad() {
		this.initSystemInfo();
	},
	onShow() {
		this.initRes();
	},
	onUnload() {
		this.removeStorage();
	}
};
</script>

<style lang="scss">
.MakeAvatar {
	width: 100vw;
	// height: 100vh;
	// background: rgba(7, 7, 9, 1);
	color: #fff;
	font-size: 32rpx;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;

	.bgi {
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		top: 0vw;
		left: 0vw;
	}

	.title-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0vw 2vw;
		.left {
			flex: 1;
			.back {
				width: 6vw;
			}
		}

		.title {
			flex: 1;
			text-align: center;
			font-size: 36rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
		.right {
			flex: 1;
			display: flex;
			justify-content: flex-end;
		}
	}

	.main-tabbar {
		margin-top: 2vw;
		display: flex;
		.tabbar-item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.img {
				width: 23%;
				margin-right: 2vw;
				position: relative;
				.icon {
					width: 100%;
					position: relative;
					// &.ac {
					// 	position: absolute;
					// 	top: 0;
					// 	left: 0;
					// }
				}
			}
			.text {
				font-size: 4.6vw;
				&.ac {
					color: #1afa29;
				}
			}
		}
	}

	.page1,
	.page2 {
		flex: 1;
		width: 90%;
		margin: 3vw auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.content {
			background: #222224;
			border-radius: 2.5vw;
			overflow: hidden;
			width: 100%;
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			background: rgba(255, 255, 255, 0.08);
			border: 1px solid rgba(56, 108, 92, 1);
			backdrop-filter: blur(26px);

			.icon {
				width: 23%;
			}
			.text {
				font-size: 3.5vw;
				color: #999;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
			.video {
				width: 100%;
				height: 100%;
			}
		}
		.main-btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.btn {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 15vw;
				margin: 5.2vw 0vw;
				border-radius: 2.5vw;
				font-weight: bold;
				&:nth-child(1) {
					margin-right: 1vw;
				}
			}
			.style1 {
				background: #313133;
				color: #fff;
			}
			.next-btn {
				background: linear-gradient(180deg, #6edc9a 0%, #05ecbd 100%);
				color: #000;
				margin-left: 1vw;
			}
		}
	}

	.page3 {
		flex: 1;
		width: 90%;
		margin: 3vw auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.main-form {
			flex: 1;
			overflow: auto;
			width: 100%;
			display: flex;
			flex-direction: column;

			.form-item {
				margin: 3vw 0vw;
				&.flex-box {
					display: flex;
					flex-direction: column;
				}
				.label {
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					display: flex;
					align-items: end;

					.text {
						font-size: 36rpx;
						margin-right: 2vw;
					}

					.subText {
						font-size: 24rpx;
						color: #f00;
					}
				}

				.box {
					margin-top: 2.5vw;
					border-radius: 3vw;
					background: rgba(255, 255, 255, 0.08);
					border: 1px solid rgba(56, 108, 92, 1);
					backdrop-filter: blur(26px);
					min-height: 10vw;
					box-sizing: border-box;
					padding: 1vw 2.5vw;

					.text {
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);

						&.nac {
							color: rgba(255, 255, 255, 0.46);
						}
					}

					&.input-box {
						display: flex;
						align-items: center;
						height: 6.8vh;
						width: 100%;

						.text {
							width: 100%;
						}
					}

					&.upload-box {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						flex: 1;
						width: 100%;
						.icon {
							width: 23%;
						}
						.text {
							font-size: 3.5vw;
						}
						.video {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}

		.main-btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.btn {
				// width: 46.8%;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 15vw;
				margin: 5.2vw 0vw;
				border-radius: 2.5vw;
				font-weight: bold;
				&:nth-child(1) {
					margin-right: 1vw;
				}
			}
			.style1 {
				background: #313133;
				color: #fff;
			}
			.style2 {
				background: linear-gradient(180deg, #6edc9a 0%, #05ecbd 100%);
				color: #000;
				margin-left: 1vw;
			}
		}
	}

	.popup-view {
		.popup-title {
			padding-top: 5vw;
			color: #fff;
			text-align: center;
		}
		.popup-cont {
			// height: 70vh;
			height: auto;
			overflow: auto;
			box-sizing: border-box;
			padding: 0vw 6vw;
			.title {
				margin-top: 5vw;
				margin-bottom: 3vw;
				.titleText {
					color: #fff;
					font-size: 4vw;
					margin-bottom: 3vw;
				}
				.subTitle {
					color: rgba(255, 255, 255, 0.68);
					font-size: 3.5vw;
				}
			}
			.photo-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.pos-box {
					width: 68%;
					position: relative;
					margin: 5vw auto;
					border-radius: 2vw;
					overflow: hidden;
				}
				.pic {
					border-radius: 2vw;
					width: 20vw;
					height: 20vw;
					&.style2 {
						width: 100%;
						display: block;
					}
				}
				.pos-text {
					text-align: center;
					position: absolute;
					width: 100%;
					left: 0vw;
					bottom: 0vw;
					background: rgba(0, 0, 0, 0.68);
					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					padding: 2vw;
					font-size: 3vw;
					color: #fff;
				}
			}
			.video-box {
				position: relative;
				margin-top: 5vw;
				width: 100%;
				border-radius: 2.5vw;
				overflow: hidden;
				
				.video {
					width: 100%;
				}
			}
		}

		.popup-btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			box-sizing: border-box;
			padding: 0vw 2vw;
			.btn {
				// width: 46.8%;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 15vw;
				margin: 5.2vw 0vw;
				border-radius: 2.5vw;
				font-weight: bold;
				&:nth-child(1) {
					margin-right: 1vw;
				}
			}
			.style1 {
				background: #313133;
				color: #fff;
			}
			.style2 {
				background: linear-gradient(180deg, #6edc9a 0%, #05ecbd 100%);
				color: #000;
				margin-left: 1vw;
			}
		}
		.people-subBtn {
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(180deg, #6edc9a 0%, #05ecbd 100%);
			width: 90%;
			height: 15vw;
			margin: 5.2vw auto;
			border-radius: 2.5vw;
			color: #000;
			font-weight: bold;
		}
	}

	.uploadTips {
		display: flex;
		flex-direction: column;
		color: #000;
		font-size: 3.5vw;
	}
}
</style>
